<template>
	<el-row class="container">
		<el-col :span="24" class="header">
		    <el-col :span="22" class="logo">
				<img src="../assets/logo.png" /> <span>学校管理<i class="txt">系统</i></span>
			</el-col>
			<el-col :span="2" class="userinfo">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><img src="../assets/head.jpg" />王小明</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside>
				<el-menu default-active="manifests" background-color="#1F2D3D" text-color="white" active-text-color="#409EFF" unique-opened router>
					<el-submenu index="1">
						<template slot="title">
				          <i class="el-icon-location"></i>
				          <span>导航一</span>
				        </template>
						 <el-menu-item index="/hello/student/page1">page1</el-menu-item>
						 <el-menu-item index="/hello/student/page2">page2</el-menu-item>
					</el-submenu>
	                <el-submenu index="2">
						<template slot="title">
				          <i class="el-icon-location"></i>
				          <span>导航二</span>
				        </template>
						 <el-menu-item index="/hello/student/page2">page2</el-menu-item>
						 <el-menu-item index="/hello/student/page2">page2</el-menu-item>
						  <el-menu-item index="/hello/student/page2">page2</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
				          <i class="el-icon-location"></i>
				          <span>导航三</span>
				        </template>
						 <el-menu-item index="/hello/student/page1">日消费明细</el-menu-item>
					</el-submenu>
	            </el-menu>
			</aside>
			<section class="content-container">
				我是右边
				<router-view/>
			</section>
		</el-col>
	</el-row>
</template>
<style type="text/css" lang="scss">
	*{
		margin:0px;
		padding:0px;
	}
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: #1F2D3D;
			color: #c0ccda;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				.userinfo-inner {
					color: #c0ccda;
					cursor: pointer;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				font-size: 22px;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color: #20a0ff
				}
			}
		}
		.main {
			background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				width: 230px;
			}
			.content-container {
				background: #f1f2f7;
				position: absolute;
				right: 0px;
				top: 0px;
				bottom: 0px;
				left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
	
</style>